<!--
* description: 二级联动下拉框-调API取值
* author: tfy
* createdDate: 2019-10-11
* modify: zxuan 2019-10-28
-->
<template>
  <section>
    <el-col :span="span">
      <div class="comwidth">
        <lableName    :validrule="validrule"    :curLabelName="curLabelName" :isShowLabel="isShowLabel" :isRequire="isRequire"></lableName>

        <el-select
          :multiple="isMul"
          collapse-tags
          :filterable="filterable"
          v-model="modelCode"
          placeholder="请选择"
          @clear="clearCodeSelect"
          :clearable="clearable"
          @change="sendCode1"
          :disabled="disabled"
          :readonly="readonly"
          size="small"
        >
          <el-option
            v-for="item in optionDatas"
            :key="item[codeField]"
            :label="item[textField]"
            :value="item[codeField]"
          >{{item[textField]}}</el-option>
        </el-select>
        <validateFormate :curLabelName="curLabelName" :validrule="validrule"></validateFormate>
      </div>
    </el-col>
  </section>
</template>
<script>
import { crmApis } from "@/api/apiList/crm";
import { requestAPI } from "@/api/commonRequest";
// import lableName from "@/components/lableName";
import { dropdownMixins } from "@/components/mixins/dropdownMixins";
// import validateFormate from "@/components/validateFormate";
export default {
  name: "secondDropList",
  // 组件混入对象：{props[span,isShowLabel,code,isMul,labelName] data[modelCode,optionDatas,listQuery] methods[queryTable,sendCode]}
  mixins: [dropdownMixins],
  components: {
    lableName: () => import("@/components/lableName"), //标题溢出样式组件
    validateFormate: () => import("@/components/validateFormate"), //校验提示样式组件
  },
  props: {
    // 值列表类型编码
    lookuptype: { type: Object, default: {} },
    // 获取组件中的名称，如：textField="carBrandCode"
    codeField: { type: String, default: "lookupValueCode" },
    // 获取组件中的名称，如：textField="carBrandName"
    textField: { type: String, default: "lookupValueName" },
    extralParams:{ type: Object, default: function() { return {} } },
    changeCodeArray: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      optionDatas: this.getData(),
      listQuery: this.getListQuery()
    };
  },
  watch: {
    modelCode(val) {
      let str = this.codeField;
      if (str) {
        this.$emit("changeDropValue", val, "", this.codeField, this.textField);
        this.$emit("changeValuewithSame", val, "", this.codeField, this.textField);
      }
    }
  },
  methods: {
    getListQuery(){
      if(this.extralParams){
        return Object.assign({isEnable: "1"},this.extralParams)
      }else{
         return {isEnable: "1"}
      }
    },
    getData: function(val, txt) {
      let that = this;
      let changCode = that.changeCodeArray[0].changCode
      let params={}
      params[changCode]=val
      Object.assign(params,that.listQuery)
      let queryObj = {
        // api配置
        apiConfig: that.lookuptype,
        // 需要调用的API服务配置
        apiServices: [
          {
            //表格中台返回网格的字段
            apiQueryRow: [that.codeField, that.textField]
          }
        ],
        //条件/实体参数（变量），根据typeParam中的定义配置
        variables: {
          pageSize: 1000,
          pageIndex: 1,
          //当前中台使用的名称有dataInfo、info，具体查看API文档
          dataInfo: changCode
            ? params
            : that.listQuery //值列表编码
        }
      };
      let paramD = that.$getParams(queryObj);
      // 调用中台API方法（可复用）
      requestAPI(paramD).then(response => {
        if (response.result == "1") {
          that.optionDatas = response.rows;
        }
      });
    },
    sendCode1(value) {
      let val=this.modelCode;
      let text=this.codeField
      this.$emit("changeCode", val,text);
      this.$emit("getCode",val,text);
      var that = this;
      var option = that.optionDatas;
      let j = value;
      var name =''
      for (var i = 0; i < option.length; i++) {
        if (option[i][that.codeField] == j) {
          name = option[i][that.textField];
          //this.$emit("changeCode", j,name);
          //this.$emit("sendChangeCode", j,name);
          this.$emit("changeDropValue", j, name, that.codeField, that.textField);
        }
      }
      this.sendCode();
      this.$emit("sendChangeCode", val,text,that.textField,name);
    },
    clearCodeSelect(){
      this.sendCode1()
    }
  }
};
</script>
